<template>
	<view>
		<view class="column align-items-center" style="padding-top: 200rpx;">
			<view class="" style="text-align: center;font-size: 50rpx;">
				选择你的兴趣爱好
			</view>
			<view style="color: #868686;text-align: center;">选择越多推荐的资讯越丰富</view>
			<view class="row" style="align-items: center;flex-wrap:wrap;margin-top: 170rpx;justify-content: space-around;width: 100%;">
				<view v-for="(item,index) in interestList" @click="selected(item,index)" :class="item.isChecked?'interest-item-checked':''"  :key="index" 
				class="interest-item" style="">
					{{item.labelName}}
				</view>
			</view>
		</view>
		<view class="column align-items-center checked-bottom" style="" @click="nextStep">
			<text style="font-size: 60rpx;color: #b9b9b9;" :style="{color:isChecked?'#000':'#b9b9b9'}">我选好了</text>
			<view v-show="isChecked" class="title-item-checked" style="">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked: 0,
				interestList:[],
				labelIdList:[]
			};
		},
		onShow() {
			this.queryInterest();
		},
		methods:{
			selected(item,index){
				item.isChecked = item.isChecked?false:true
				this.$forceUpdate()
				if(item.isChecked){
					this.isChecked++
				}else {
					this.isChecked--
				}
			},
			nextStep(){
				if(this.isChecked>0){
					this.interestList.forEach(item =>{
						if(item.isChecked){
							this.labelIdList.push(item.labelId)
						}
					})
					console.log("设置标签",this.labelIdList)
					this.$util.doPostForm(`/label/user/insertLmLabelByUserId`, {
						labelIds:this.labelIdList
					}, {}, true).then(res => {
						console.log("设置标签成功",res.data)
						if(res.data.code = this.$ResponseStatus.OK){
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/index/index"
								})
							},500)
						}
					}).catch(error => {
						console.log(error)
						uni.hideLoading()
					})
					
				}
				
			},
			queryInterest(){
				this.$util.doGet(`/label/list`, {}, {}, true).then(res => {
					if(res.data.code = this.$ResponseStatus.OK){
						this.interestList = res.data.rows
						if(this.interestList&&this.interestList.length>0){
							this.interestList.forEach(item =>{
								item.isChecked = false
							})
						}
					}
				}).catch(error => {
					console.log(error)
					uni.reLaunch({
						url:"/pages/login/login"
					})
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.row {}

	.interest-item {
		margin: 10rpx 0rpx;
		padding: 20rpx 30rpx;
		border-radius: 50rpx;
		border: solid 1rpx #ECECEC;
		color: #b9b9b9;
		text-align: center;
	}

	.interest-item-checked {
		background-color: #EB5863;
		color: #FFFFFF;
	}

	.checked-bottom {
		width: 750rpx;
		position: absolute;
		bottom: 280rpx;
		height: 150rpx;
		align-items: center;
		justify-content: space-between;
	}

	.checked-text {
		color: #000;
	}

	.title-item-checked {
		width: 550rpx;
		height: 20rpx;
		background-color: #000;
		border-radius: 50rpx;
		transform: scale(0.5);
	}
</style>
